<!DOCTYPE html>
<html lang="en"  xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="utf-8" />
		<link rel="stylesheet" type="text/css" href="/css/gm1.css"/>
		<script src="./js/jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script>
		<title>登录</title>
	</head>
	<body>
		<!--顶部logo-->
		<header>
			<a href="http://www.baidu.com"><img src="/img/logo1.jpg"/></a><p>欢迎登录</p>
 
		</header>
		
		<div class="top-2">
			<div class="top-2a">
				 
				<p> </p>
			</div>
		</div>
		
		<!--大图-->
		<div class="top-3">
			<div class="img_1">
				<img src="/img/5731485aN1134b4f0.jpg"/>
			</div>
			<div id="sign">
 
				<div class="si_cen">
					<h2 class="act btn1">用户登录</h2>
					 
				</div>
 
				<div class="si_bom1 tab" style="display: block;">
					<div  class="error">
						请输入账户名和密码
					</div>

					<form id="loginForm" action="./login" method="post">
					<ul>
						<li class="top_1">
							<img src="/img/user_03.png" class="err_img1"/>

							<input type="text" name="loginName" placeholder=" 邮箱/用户名/已验证手机"  class="user"/>
						</li>
						<li>
							<img src="/img/user_06.png" class="err_img2"/>
							<input type="password" name="passwd" placeholder=" 密码" class="password"/>

						</li>
						<li class="bri">
							<a href="">忘记密码</a>
						</li>
						<li class="ent"><button id="btn2" type="button" class="btn2"><a class="a">登 &nbsp; &nbsp;录</a></button></li>

					</ul>
						<input type="hidden" id="originUrl" name="originUrl" th:value="${originUrl}"/>
					</form>
				</div>
			<div class="si_out">
 
				<h5 class="rig">
						<img src="/img/4de5019d2404d347897dee637895d02b_25.png"/>
						<span><a href="#">立即注册</a></span>
					</h5>
			</div>
			</div>
		</div>

		
		<!--底部-->
		 
		
	</body>
	<script language="JavaScript">
 
			
			var btn2=document.getElementsByClassName('btn2')[0];
			var user=document.getElementsByClassName('user')[0];
			var pass=document.getElementsByClassName('password')[0];
			var err=document.getElementsByClassName('error')[0];

			var err_img1=document.getElementsByClassName('err_img1')[0];

			var err_img2=document.getElementsByClassName('err_img2')[0];
		 
			btn2.onclick=function(){
				if(user.value == '' || pass.value ==''){
					err.style.display='block';
					user.style.border='1px solid red';
					pass.style.border='1px solid red';
					 
					err_img1.src='img/img11.png';
					err_img2.src='img/img22.png';
				}else{
				    console.log("123123");
                    $.post("/login",$("#loginForm").serialize(),function (data) {
                        if(data&&data!='fail'){
                            var originUrl = $("#originUrl").val();
                            console.log("originUrl:"+originUrl);
                            if(originUrl==''){
                                window.location.href="http://www.gmall.com/"
								return ;
                            }
                              originUrl = decodeURIComponent(originUrl);
                            var idx=originUrl.indexOf('?');

                            if(idx<0){
                                originUrl+='?'
                            }else{
                                originUrl+='&'
                            }
                            window.location.href=originUrl+"newToken="+data;
                            return ;
                        }else{
                            $(".error").text("用户名密码错误！");
                            $(".error").show();
                        }
                    }   );
                }
			 return;


				}
			 user.onfocus=function(){
                 
                user.style.border='1px solid #999';

		 }

            pass.onfocus=function(){
                
                pass.style.border='1px solid #999';
            }
            user.onblur=function(){
                 
                user.style.border='1px solid green';
            }
            pass.onblur=function(){
                
                pass.style.border='1px solid green';
            }
	</script>
</html>
